<!-- 检查仪器页面  -->
<script setup lang='ts' name="Examine">
import {ref, reactive, watch, onBeforeMount, onActivated} from 'vue'
import {HeaderData} from '@/components/dTable/dTable'
import {OperButton, SearchFromItem, SearchButton} from '@/components/dTable/dHeader'
import {PageConfig, defaultPage, defaultPageSize, defaultPageSizes, defaultLayout} from '@/components/dTable/dFooter'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import pageContainer from '@/components/pageContainer.vue'
import operation from '@/components//dTable/components/operation.vue'
import edit  from './addEdit.vue'
import {NotLeadingAndTrailingSpaces} from '@/util/common'
import { ElMessage, ElMessageBox, FormRules} from 'element-plus'
import { instrumentpage, SearchData, SaveData, SearchData1, instrumentDelete, TableData} from '@/api/instrument/examine'
import { ColorTheme, ColorRed, DialogType} from '@/api/config'
import router from '@/router/index'


const searchData = reactive<SearchData>({
  page: 1, // 默认页码
  limit:10, // 默认每页条数
  instrumentName:'', // 仪器名称
  companyId:'', // 生产厂家id
  model:'', // 仪器型号
  instrumentType:2, // 仪器分类编码
  instrumentClass:''//检验仪器类型
})

const formData = ref<SaveData>({
  instrumentName:'', // 仪器名称
  instrumentType:2, // 仪器分类编码
  instrumentClass:'', //检验仪器类型
  reagents:[], // 选择的试剂数组
  companyId:'', // 生产厂家id
  id:'',
  brandType:'', // 品牌类型编码:进口/合资等
  model:'',
  specimenRule:''
})


//弹窗类型
const dialogType = ref<DialogType>('add')
// 弹窗显示
const editShow = ref(false)

// 弹窗显示
const disabled = ref(false)

const operationData = [
  {code:'edit', label:'编辑', iconConfig: {icon: 'common-edit', type: 'custom', color: ColorTheme, size: 20}},
  {code:'subitem', label:'维护检查项目', iconConfig:{icon:'common-weihu', type:'custom', color:ColorTheme, size:20}},
  {code:'del', label:'删除', iconConfig:{icon:'common-delete', type:'custom', color:ColorRed, size:20}}
]

//数据
const tableData = ref<Array<TableData>>([])
//表格数据
const tableHeaderData = ref<Array<HeaderData>>([
  {prop:'instrumentCode', label:'仪器编码', columnType:'text', align:'left', 'min-width':'181'},
  {prop:'instrumentName', label:'仪器名称', columnType:'text', align:'left', 'min-width':'188'},
  {prop:'model', label:'仪器型号', columnType:'text', align:'left', 'min-width':'181'},
  {prop:'operation', label:'操作', columnType:'slot', 'min-width':'50', fixed:'right'}
])
//底部
const pageConfig = ref<PageConfig>({
  currentPage:defaultPage,
  pageSize:defaultPageSize,
  pageSizes:defaultPageSizes,
  total:0,
  disabled:false,
  layout:defaultLayout
})




// 查询接口
const Ifinstrumentpage = () => {
  instrumentpage(searchData).then(res => {
    pageConfig.value.total = Number(res.data.data.total)
    res.data.data.records.map(item => {
      item.operation =  operationData
    })
    tableData.value = res.data.data.records
  })
}



// 删除接口
const IfinstrumentDelete = (id:string) => {
  instrumentDelete({id:id}).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      Ifinstrumentpage()
    }
  })
}

//表头
const operButtons = ref<Array<OperButton>>([
  {label:'新增', type:'noraml', iconConfig:{icon:'plus', type:'el'}, code:'add'}
])
// 筛选区功能
const searchFromItems = ref<Array<SearchFromItem>>(
  [
    {label:'仪器名称', placeholder:'请输入仪器名称', type:'input',  prop:'instrumentName', enterSubmit:true}
  ]
)

const searchFromData = reactive<SearchData1>({instrumentName:'', companyId:'', model:'', instrumentType:2, instrumentClass:''})

const searchFromRules = reactive<FormRules>({
  instrumentName:[
    {required:false, message:'长度应小于50个字符', max:50, trigger: ['change', 'blur']},
    { required: false, message: '首尾不能为空', pattern:NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ]
})



// 按钮搜索配置
const serachButtons = ref<Array<SearchButton>>([
  {type:'search'},
  {type:'clear'}
])

// 提交搜索
const onSubmit = () => {
  searchData.instrumentName  = searchFromData.instrumentName
  searchData.companyId  = searchFromData.companyId
  searchData.model  = searchFromData.model
  searchData.instrumentClass = searchFromData.instrumentClass
  searchData.instrumentType  = searchFromData.instrumentType
  Ifinstrumentpage()
}

const onFormClear = () => {
  searchData.instrumentName  = ''
  searchData.companyId  = ''
  searchData.model = ''
  searchData.instrumentClass = ''
  Ifinstrumentpage()
}

const onOperation = (name:string) => {
  switch (name) {
  case 'add':
    formData.value = {
      instrumentName:'', // 仪器名称
      instrumentType:2, // 仪器分类编码
      instrumentClass:'', //检验仪器类型
      reagents:[], // 选择的试剂数组
      companyId:'', // 生产厂家id
      id:'',
      brandType:'', // 品牌类型编码:进口/合资等
      model:'',
      specimenRule:'', //标本号规则
      communicationType:undefined
    }
    editShow.value = true
    disabled.value = false
    break
  }
}


const onSizeChange = () => {
  searchData.limit = pageConfig.value.pageSize
  Ifinstrumentpage()
}

const onCurrentChange = () => {
  searchData.page = pageConfig.value.currentPage
  Ifinstrumentpage()
}


// 操作栏点击事件
const onErtion = (err, row) => {
  switch (err) {
  case 'edit':
    formData.value = {...row}
    editShow.value = true
    disabled.value = false
    break
  case 'subitem':
    router.push({path:'/home/instrument/examine/maintenanceChecks', query:{id:row.id}})
    break
  case 'del':
    ElMessageBox.confirm(
      '是否确认删除此检查仪器？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
      .then(() => {
        IfinstrumentDelete(row.id)
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: '取消'
        // })
      })
    break
  }
}

// 弹窗取消
const onCancel = () => {
  editShow.value = false
}

// 弹窗关闭
const onClose = () => {
  editShow.value = false
}

// 弹窗保存
const onConfirm = () => {
  editShow.value = false
  Ifinstrumentpage()
}

// 生命周期
onBeforeMount(() => {
  Ifinstrumentpage()
})
onActivated(() => {
  Ifinstrumentpage()
})

</script>

<template>
  <page-container>
    <d-table-promote
      :oper-buttons="operButtons"
      :search-form-items="searchFromItems"
      :search-buttons="serachButtons"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :page-config="pageConfig"
      :search-from-justify="'flexStart'"
      :search-form-data="searchFromData"
      :search-rules="searchFromRules"
      :label-width="100"
      @form-submit="onSubmit"
      @operation="onOperation"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      @form-clear="onFormClear"
    >
      <template #operation="scope">
        <operation :row="scope.row" :col="scope.item" @opertion-click="onErtion" />
      </template>
    </d-table-promote>
  </page-container>
  <edit
    v-if="editShow"
    :pop-data="formData"
    :show-dialog="editShow"
    :disabled="disabled"
    :dialog-type="dialogType"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  />
</template>

<style scoped>
.test-con{
  margin: 50px;
}
.test-tablecon{
  height: 500px;
  width: 100%;
  /* width: 800px; */
}
.test-box{
  height: 20px;
  background-color:rgba(128, 0, 128, 0.5);
  border-radius: 5px;
}
</style>